<script setup lang="ts">
import { onMounted, ref } from 'vue'
import CdcModal from '@/components/CdcModal/index.vue'
import CdcTable from '@/components/CdcTable/index.vue'
import { orgLiveList } from '@/api'

const cdcModalRef = ref<InstanceType<typeof CdcModal>>()

const tableData = ref([])
const open = (num: number) => {
  cdcModalRef.value?.showModal()
  const data = {
    statCode: '',
  }
  if (num === 1) {
    // 上月
    data.statCode = 'ZJCDC_ZZSH_LIST_001'
  } else if (num === 2) {
    // 本月
    data.statCode = 'ZJCDC_ZZSH_LIST_002'
  }
  orgLiveList(data).then((res) => {
    if (res.code === '200') {
      tableData.value = res.data[0]?.statData.tjsj1 || []
    }
  })
}
onMounted(() => {})
defineExpose({
  open,
})
</script>

<template>
  <CdcModal
    ref="cdcModalRef"
    :data="{
      title: '组织生活',
    }"
  >
    <div class="bg-#0F1E31 p-50px h-500px">
      <CdcTable
        :data="{
          columns: [
            { field: 'department_name', title: '党组织名称', minWidth: 120 },
            { field: 'wwczzshlx', title: '未完成的组织生活类型', minWidth: 100 },
          ],
          showSeq: true,
          tableConfig: {
            data: tableData,
            'header-row-class-name': 'bg-#555 text-white',
            'row-class-name': ({ $rowIndex }: any) => {
              return `${$rowIndex % 2 == 0 ? 'bg-#000' : 'bg-#333'} text-white`
            },
            height: '100%',
          },
        }"
      ></CdcTable>
    </div>
  </CdcModal>
</template>

<style lang="scss" scoped>
:deep(.vxe-cell--title) {
  font-size: 22px;
}
:deep(.vxe-table--render-default .vxe-table--body-wrapper) {
  background: none;
}
:deep(.vxe-table--render-wrapper) {
  background: none;
  font-size: 16px;
}
:deep(.vxe-table--header-wrapper .body--wrapper) {
  background: none;
}
</style>
